<template>
    <div class="container">
      <div class="header">
          <van-icon name="arrow-left" @click="goBack" class="header-left" size="30" />
          填写订单服务
      </div>
      <status-bar item="0" />
      <!-- 服务内容 -->
      <van-cell class="cell">
        <template #title>
          <van-image
              width="25"
              height="25"
              :src="orderInfo.service.serviceImg"
          />
          <span class="server-name">{{ orderInfo.service.serviceName }}</span>
        </template>
        <template #default>
          <div class="service-text">服务内容</div>
        </template>
      </van-cell>
      <!-- 选择项 -->
      <van-cell-group class="cell">
        <!-- 医院选择 -->
        <van-cell>
          <template #title>就诊医院</template>
          <template #default>
            <div @click="showHos=true">{{ form.hospital_name  || '请选择医院' }}<van-icon name='arrow' /></div>
          </template>
        </van-cell>
        <!-- 就诊时间 -->
        <van-cell>
          <template #title>就诊时间</template>
          <template #default>
            <div @click="showDate=true">{{ currentDate  || '请选择就诊时间' }}<van-icon name='arrow' /></div>
          </template>
        </van-cell>
        <!-- 陪诊师选择 -->
        <van-cell>
          <template #title>陪诊师</template>
          <template #default>
            <div @click="showCompanion=true">{{ companion  || '请选择陪诊师' }}<van-icon name='arrow' /></div>
          </template>
        </van-cell>
        <!-- 地址填写 -->
        <van-field
          v-model="form.receiveAddress"
          label="接送地址"
          placeholder="请输入接送地址"
          input-align="right"
        />
        <!-- 联系电话 -->
        <van-field
          v-model="form.tel"
          label="联系电话"
          placeholder="请输入联系电话"
          input-align="right"
        />
      </van-cell-group>
      <!-- 服务需求 -->
      <van-cell-group title="服务需求" class="cell">
        <van-field
          style="height: 100px;"
          v-model="form.demand"
          placeholder="请填写你要确诊的科室！！"
        />
      </van-cell-group>
      <van-button class="submit" type="primary" block @click="handleSubmit">提交订单</van-button>

      <!-- 医院选择弹出层 -->
      <van-popup
        v-model:show="showHos"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <!-- 滑动层 -->
        <van-picker
          :columns="hospitalColums"
          @confirm="hospitalConfirm"
          @cancel="showHos = false"
        />
      </van-popup>
      
      <!-- 就诊时间弹出层 -->
      <van-popup
        v-model:show="showDate"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <!-- 滑动层 -->
        <van-date-picker
          title="选择日期"
          :min-date="minDate"
          @cancel="showDate = false"
          @confirm="dateConfirm"
        />
      </van-popup>

      <!-- 陪诊师弹出层 -->
      <van-popup
        v-model:show="showCompanion"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <!-- 滑动层 -->
        <van-date-picker
          title="选择陪诊师"
          :columns="companionColums"
          @cancel="showCompanion = false"
          @confirm="comConfirm"
        />
      </van-popup>

      <!-- 二维码弹框 -->
      <van-dialog :show-confirm-button="false" v-model:show="showCode">
        <van-icon name="cross" class="close" @click="closeCode" />
        <div>微信支付</div>
        <van-image
          width="150"
          height="150"
          :src="codeImg"
        ></van-image>
        <div>请使用本人微信扫描二维码</div>
      </van-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, reactive, computed } from 'vue' 
import { useRouter } from 'vue-router'
import statusBar from '@/components/statusBar.vue'
import Qrcode from 'qrcode'

const { proxy } = getCurrentInstance()

const router = useRouter()

// 当前时间
const minDate = ref(new Date())
const currentDate = ref('')
const companion = ref('')
// 隐藏二维码弹框
const showCode = ref(false)
const codeImg = ref('')

// 订单页面响应式数据
const orderInfo = reactive({
  companion: [],
  hospitals: [],
  service: {}
})
// 订单提交表单
const form = reactive({
  hospital_id: '',
  hospital_name: '',
  starttime: '',
  companion_id: '',
  receiveAddress: '',
  tel: '',
  demand: ''
})
// 重构医院选择列表
const hospitalColums = computed(() => {
  return orderInfo.hospitals.map(item => {
    return { text: item.name, value: item.id}
  })
})
const companionColums = computed(() => {
  return orderInfo.companion.map(item => {
    return { text: item.name, value: item.id}
  })
})
// 展示弹出层
const showHos = ref(false)
const showDate = ref(false)
const showCompanion = ref(false)

onMounted(async () => {
  const { data } = await proxy.$api.orderDetail()
  Object.assign(orderInfo, data.data)
  console.log(orderInfo)
})

// 选择医院
const hospitalConfirm = (item) => {
  form.hospital_id = item.selectedOptions[0].value
  form.hospital_name = item.selectedOptions[0].text
  showHos.value = false
}
// 选择时间
const dateConfirm = (item) => {
  const dateStr = item.selectedValues.join('-')
  currentDate.value = dateStr
  form.starttime = new Date(dateStr).getTime()
  showDate.value = false
}
// 选择陪诊师
const comConfirm = (item) => {
  form.companion_id = item.selectedOptions[0].value
  companion.value = item.selectedOptions[0].text
  showCompanion.value = false
}
const goBack = () => {
  router.go(-1)
}
// 订单提交
const handleSubmit = async () => {
  // 进行表单校验，判空处理
  for (const key in form) {
    if (!form[key] || form[key] === '') {
      showNotify({ message: '请填写完整信息！' })
      return
    }
  }
  const { data } = await proxy.$api.submitOrder(form)
  console.log(data)
  if (data.code === 10000) {
    showCode.value = true
    Qrcode.toDataURL(data.data.wx_code).then(item => {
      return codeImg.value = item
    })
  }
}
// 关闭二维码
const closeCode = () => {
  showCode.value = false
  // 跳转到订单页面
  router.push('/order')
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
  ::v-deep(.van-cell__title) {
	display: flex;
	align-items: center;
  }
  .server-name {
	  margin-left: 10px;
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.submit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
